<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%String ctx = request.getContextPath();%>
<title>result list</title>
</head>

<script>
	$(document).ready(function(){
		$.ajax(
				{
					dataType: "json",
					type: "GET",
					url: "<%=ctx%>/exam?act=getAll",
					data: {},
					success: function(data, status) {
						let select = $("#exam")
						select.empty();
						let idx = 1;
						$.each(data, function(i, e) {
							select.append("<option value='" + e.id + "'>"+ e.name +"</option>");
							idx += 1;
						})
					},
					error: function(req, status, msg) {
						alert(msg)
					}
				}
		)
	});

	function calcExamResult() {
		let examName = $("#exam").find("option:selected").text() + "";
		$.ajax(
				{
					dataType: "json",
					type:"GET",
					url: "<%=ctx%>/control?act=calcResult",
					data: {
						"examname" : examName
					},
					success: function(data, status) {
						alert("计算完毕")
					},
					error: function(req, status, msg) {
						alert(msg);
					}
				}
		)
	}

	function showExamResult() {
		let examName = $("#exam").find("option:selected").text() + "";
		$.ajax(
				{
					dataType: "json",
					type:"GET",
					url: "<%=ctx%>/control?act=getResult",
					data: {
						"examname" : examName
					},
					success: function(data, status) {
						let tbody = $("#resultbody")
						tbody.empty();
						let idx = 1;
						$.each(data, function(i, e) {
							tbody.append("<tr><td>" + idx + "</td><td style=\"overflow: hidden;text-overflow: ellipsis;\">" + e.userName + " "+ e.score +
									"</td></tr>");
							idx += 1;
						})
					},
					error: function(req, status, msg) {
						alert(msg);
					}
				}
		)
	}

</script>

<body>
	<div id="list" class="col-md-10 col-xs-12">
		<h3>成绩列表</h3>
		<hr>

		<div class="fiter col-md-10 col-xs-12">
			<h5>选择一个考试</h5>
			<form action="" class="form-horizontal form-inline">
				<select class="form-control" id="exam"/>
				<button type="button" class="btn btn-success" onclick="showExamResult()">确定</button>
				<button type="button" class="btn btn-primary" onclick="calcExamResult()">重新计算分数</button>
			</form>
		</div>

		<table class="table table-hover">
			<thead> <tr>
					<th>序号</th>
					<th>成绩</th>
			</tr></thead>
			
			<tbody id="resultbody"> 
				<c:forEach items="${ResultVoList}" var="Result" varStatus="s">
			<tr>
					<td>${s.index + 1}</td>
					<td style="overflow: hidden;text-overflow: ellipsis;">${Result.userName} ${Result.score}</td>
			</tr>
		</c:forEach>
			</tbody>
		</table>
	</div>
</body>
</html>